<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<!-- 编码一 -->
	<!-- 按照HTML中按钮的描述以此实现功能
	计算结果显示在 id 为 result 的 P 标签中
	除了第一个按钮，其它按钮操作时，都需要判断输入是否为数字，否则在 console 中输出错误信息 -->
	<div>
	    <label>Number A:<input id="radio-a" type="radio" name="math-obj" value="a"></label><input id="num-a" type="text">
	    <label>Number B:<input id="radio-b" type="radio" name="math-obj" value="b"></label><input id="num-b" type="text">
	</div>
	<div>
		<div id="btnWrapper">
			<button id="isNumber">判断当前选中的输入框输入内容是否为数字</button>
		    <button id="mathRound">把 A 四舍五入为 B 个小数位数的数字</button>
		    <button id="mathAbs">当前选中数字的绝对值</button>
		    <button id="matchCeil">对当前选中的数字进行上舍入</button>
		    <button id="matchFloor">对当前选中的数字进行下舍入</button>
		    <button id="mathRound02">把当前选中的数字四舍五入为最接近的整数</button>
		    <button id="mathMax">返回 A 和 B 中的最高值</button>
		    <button id="mathMin">返回 A 和 B 中的最低值</button>        
		</div>
	</div>
	<p id="result"></p>



	<!-- 编码二 -->
	<div>
	    <label>String A:
	        <input id="radio-a2" type="radio" checked="true" name="str-obj" value="a">
	    </label>
	    <textarea id="str-a"></textarea>
	    <label>String B:
	        <input id="radio-b2" type="radio" name="str-obj" value="b">
	    </label>
	    <textarea id="str-b"></textarea>        
	    <label>Num A：<input id="num-a2" type="number" value="0"></label>
	    <label>Num B：<input id="num-b2" type="number" value="1"></label>
	</div>
	<div id="btnWrapper2">
	    <button id="btn1">获取当前选中输入的内容长度</button>
	    <button id="btn2">当前选中输入中的第3个字符</button>
	    <button id="btn3">把两个输入框的文字连接在一起输出（concat）</button>
	    <button id="btn4">输入B中的内容，在输入A的内容中第一次出现的位置（indexOf）</button>
	    <button id="btn5">输入A中的内容，在输入B的内容中最后一次出现的位置（lastIndexOf）</button>
	    <button id="btn6">使用slice获取选中输入框内容的部分内容，参数为num-a及num-b</button>
	    <button id="btn7">当前选中输入框的行数</button>
	    <button id="btn8">使用substr获取选中输入框内容的子字符串，参数为num-a及num-b</button>
	    <button id="btn9">把所选输入框中的内容全部转为大写</button>
	    <button id="btn10">把所选输入框中的内容全部转为小写</button>
	    <button id="btn11">把所选输入框中内容的半角空格全部去除</button>
	    <button id="btn12">把所选输入框中内容的a全部替换成另外一个输入框中的内容</button>
	</div>
	<p id="result2"></p>

	<button onClick="this.style.display='none'">asdads</button>
	<button onClick="model(this)">指向问题</button>

</body>
<script type="text/javascript">
	var wrapper = document.getElementById("btnWrapper");
	var numA = document.getElementById("num-a"),
		radioA = document.getElementById("radio-a"),
		radioB = document.getElementById("radio-b"),
		numB = document.getElementById("num-b");
	wrapper.onclick = function(event) {
		var e = event || window.event;
		var target = e.target || e.srcElement;
		if (target.nodeName.toLowerCase() == 'button') {
			switch(target.id) {
				case "isNumber":
				var a = parseInt(numA.value);
				var b = parseInt(numB.value);
				console.log(typeof a === 'number');
				console.log(typeof b === 'number');
				break;
				case "mathRound":
				var a = Number(numA.value);
				var b = Number(numB.value);
				console.log(1.6.toFixed(0))
				console.log(a.toFixed(b))
				break;
				case "mathAbs":
				if (radioA.checked) {
					var a = Number(numA.value);
					if (isNaN(a)) {
						alert('请输入数字');
						return;
					}
					console.log(Math.abs(a));
				} else if (radioB.checked) {
					var b = Number(numB.value);
					if (isNaN(b)) {
						alert('请输入数字');
						return;
					}
					console.log(Math.abs(b));
				} else {
					alert('请选择选项')
				}
				break;
				case "matchCeil":
				if (radioA.checked) {
					var a = Number(numA.value);
					if (isNaN(a)) {
						alert('请输入数字');
						return;
					}
					console.log(Math.ceil(a));
				} else if (radioB.checked) {
					var b = Number(numB.value);
					if (isNaN(b)) {
						alert('请输入数字');
						return;
					}
					console.log(Math.ceil(b));
				} else {
					alert('请选择选项')
				}
				break;
				case "matchFloor":
				if (radioA.checked) {
					var a = Number(numA.value);
					if (isNaN(a)) {
						alert('请输入数字');
						return;
					}
					console.log(Math.floor(a));
				} else if (radioB.checked) {
					var b = Number(numB.value);
					if (isNaN(b)) {
						alert('请输入数字');
						return;
					}
					console.log(Math.floor(b));
				} else {
					alert('请选择选项')
				}

				break;
				case "mathRound02":
				if (radioA.checked) {
					var a = Number(numA.value);
					if (isNaN(a)) {
						alert('请输入数字');
						return;
					}
					console.log(Math.round(a));
				} else if (radioB.checked) {
					var b = Number(numB.value);
					if (isNaN(b)) {
						alert('请输入数字');
						return;
					}
					console.log(Math.round(b));
				} else {
					alert('请选择选项')
				}
				break;
				case "mathMax":
				var a = Number(numA.value);
				var b = Number(numB.value);
				console.log(Math.max(a,b))
				break;
				case "mathMin":
				var a = Number(numA.value);
				var b = Number(numB.value);
				console.log(Math.min(a,b))
				break;
			}
		}
	}
</script>

<script type="text/javascript">
	var g = function(id) {
		return document.getElementById(id);
	}
	var ra2 = g("radio-a2"),
		rb2 = g("radio-b2"),
		sta = g("str-a"),
		stb = g("str-b"),
		numA2 = g("num-a2"),
		numB2 = g("num-b2"),
		btnWrapper2 = g("btnWrapper2");
	btnWrapper2.onclick = function(event) {
		var e = event || window.event;
		var target = e.target || e.srcElement;
		if (target.nodeName.toLowerCase() == 'button') {
			switch(target.id) {
				case "btn1":
					alert(sta.value.length);
				break;
				case "btn2":
					alert(sta.value.charAt(2))
					alert(sta.value.slice(2,3))
					alert(sta.value.substring(2,3))
				break;
				case "btn3":
					alert(sta.value.concat(stb.value))
				break;
				case "btn4":
					alert(stb.value.indexOf(sta.value))
				break;
				case "btn5":
					alert(stb.value.lastIndexOf(sta.value))
				break;
				case "btn6":
					console.log(numA2.value,numB2.value)
					alert(sta.value.slice(numA2.value,numB2.value))
				break;
				case "btn7":
					console.log('待定')
					break;
				case "btn8":
					alert(sta.value.substr(numA2.value,numB2.value))
				break;
				case "btn9":
					alert(sta.value.toUpperCase())
				break;
				case "btn10":
					alert(sta.value.toLowerCase())
				break;
				case "btn11":
					alert(sta.value.trim())
				break;
				case "btn12":
					sta.value = sta.value.replace(sta.value,stb.value)
				break;
			}
		}
	}
</script>

<script type="text/javascript">
	/*
		去掉字符串str中，连续重复的地方
	*/
	function removeRepetition(str) {
	    var result = "";

	    if (str) {
	    	var len = str.length;
		    var i;
		    for (i=0; i< len; i++) {
		    	if (str[i] != str[i+1]) {
		    		result += str[i];
		    	}
		    }
	    }

	    // do something
	    

	    return result;
	}

	// 测试用例
	console.log(removeRepetition("aaa")); // ->a
	console.log(removeRepetition("abbba")); // ->aba
	console.log(removeRepetition("aabbaabb")); // ->abab
	console.log(removeRepetition("")); // ->
	console.log(removeRepetition("abc")); // ->abc


	// 将字符串转成驼峰写法
	// border-bottom-color
	function hump(str) {
		var res = '';
		var arr = str.split('-')
		console.log(arr);
		var len = arr.length;
		    var i;
		    for (i=0; i< len; i++) {
		    	if (i > 0) {
		    		arr[i] = arr[i].charAt(0).toUpperCase() + arr[i].substring(1);
		    	}
		    }
		    res = arr.join('')
		return res
	}
	console.log(hump("border-bottom-color"))

	let str = "border-bottom-color";
    console.log(change(str))
	function change(val){

     return val.split('-').reduce((prev,cur,index) => {
     	 console.log(cur)
         return prev + cur.charAt(0).toUpperCase()+cur.substring(1);
    });
}
</script>

<script type="text/javascript">
	'use strict'
	function test() {
		console.log(this)
	}test()

	function model(query) {
		console.log(query)
	}

	var age = 15
	var obj = {
		age: 20,
		ta: this.age,
		firest: function() {
			return this.age
		}
	}
	console.log(obj.firest(),obj.ta) // 15 20
</script>
<script type="text/javascript">
	// object 是一个无序属性的集合，它的值可以是基本值，对象或者函数
	// object 有两种内部属性 数据属性和访问器属性
	/*数据属性 : configurable // 表示是否可以通过delete删除属性从而重新定义属性,能否修改属性的特性，或者能否把属性修改为访问器属性
				Enumerable // 表示是否可以通过for-in返回循环值
				Writable // 表示能否修改属性的值，默认为true
				Value // 包含这个属性的数据值,默认undefined*/
	var person = {};
	Object.defineProperty(person,"name", {
		writable: false, // true
		configurable: false, // true
		value: 'J'
	})
	//alert(person.name) // J
	//delete person.name;
	//alert(person.name) // J // writable true=> O // configurable true => undefined


	/* 访问器属性 ：
		configurable  表示是否可以通过delete删除属性 true允许，false则禁止,默认是true
		Enumerable  表示是否可以通过for-in返回循环值 默认true
		get: 在读取属性时调用的函数 // 默认undefined
		set: 在写入函数时调用的函数 // 默认是undefined

	*/
	var _year = 123;
	var person1 = {
		_year: 2019,
		edtion: 5
	}
	Object.defineProperty(person1,'newYear',{
		get: () => {
			return this._year; // 此时的this指向全局window
		},

		set: function(newValue) {
			if (newValue > this._year) {
				this.edtion+=this._year
			}
		}
	})
	//alert(person1.newYear);
	person1.newYear = 2020;
	//alert(person1.edtion);


	// 定义多个属性 Object.defineProperties() 两个参数一个是添加或修改的属性对象，第二个是要修改的对象

	// 读取属性的特性 Object.getOwnPropertyDescriptor() 

</script>

<script type="text/javascript">
	// 构造函数
	function Person(name,age,job) {
		this.name = name;
		this.age = age;
		this.job = job;
		this.sayName = sayName;
	}

	function sayName () {
		console.log(this)
		return this.name;
	}
	var P1 = new Person('J',20,'teacher');
	var P2 = new Person('K',20,'teacher');
	//alert(P1.sayName()) // J



</script>
<script type="text/javascript">
	// 面向对象
	// 为了解决使用同一个接口创建很多对象，会产生很多重复性的代码。
	// 三大模式 工厂模式、构造函数模式、原型模式

	// 工厂模式
	function createPerson(name,age,job) {
		var o = new Object();
		o.name = name;
		o.age = age;
		o.job = job;
		o.sayName = function() {
			return this.name
		};
		return o
	}
	var p1 = createPerson('J',20,'fe');
	var p2 = createPerson('K',20,'fe');
	console.log(p1.name,p1.sayName());
	console.log(p1 instanceof createPerson) // false
	console.log(p1.constructor == createPerson) // false

	// 特点：可以无数次调用createPerson函数且每次都返回对象
	// 欠缺：没有解决对象识别的问题


	// 构造函数模式

	function Person(name,age,job) {
		this.name = name;
		this.age = age;
		this.job = job;
		this.sayName = function() {
			return this.name;
		}
	}
	var p3 = new Person('J',20,'fe');
	var p4 = new Person('K',20,'fe');
	console.log(p3.age,p3.sayName())
	console.log(p3 instanceof Person);
	console.log(p3 instanceof Object);
	console.log(p3.constructor == Person);
	// 特点 具有工厂模式的特点外 还具有 通过constructor 来识别对象类型


	// 原型模式
	// 为了解决定义很多对象方法的问题

	function Person1() {};

	Person1.prototype.name = 'J';
	Person1.prototype.age = 29;
	Person1.prototype.sayName = function() {
		return this.name;
	}

	var p5 = new Person1();
	console.log(p5.sayName())



</script>
</html>